<template>
  <div class="admin-item">
    <div class="list-item" >
      <span><el-icon class="icon"><UserFilled /></el-icon>账号(用户)</span>
      <span>{{user.account}}</span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><StarFilled /></el-icon>姓名</span>
      <span>{{user.name}}</span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><InfoFilled /></el-icon>编号</span>
      <span>{{user.identify}}</span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><HelpFilled /></el-icon>角色</span>
      <span><el-tag type="warning">管理员</el-tag></span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><Avatar /></el-icon>性别</span>
      <span>{{user.gender}}</span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><Iphone /></el-icon>联系方式</span>
      <span>{{user.phone}}</span>
    </div>
    <div class="list-item">
      <span><el-icon class="icon"><Promotion /></el-icon>电子邮箱</span>
      <span>{{user.email}}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    default: () => {}
  }
})


</script>

<style lang='less' scoped>
.admin-item {
  width: 100%;
  height: 100%;
  .list-item {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      border-bottom: 1px solid #ededed;
      font-size: 14px;
      >span{
        position: relative;
        padding-left: 25px;
        .icon {
          font-size: 16px;
          position: absolute;
          top: 0;
          left: 0;
          color: rgb(93, 158, 219)
        }
      }
    }
}
</style>